<template>
    <div class="gray-bg">
	    <div class="row wrapper border-bottom white-bg page-heading">
	        <div class="col-lg-10 col-lg-offset-1">
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <router-link to="../../../../login"> <i class="fa fa-sign-out"></i> Log out </router-link>
                    </li>
                </ul>
	            <h2>广告版式</h2>
	            <ol class="breadcrumb">
                    <li>
                        <a> WeShare Partner </a>
                    </li>
                    <li>
                        <router-link to="./../../List"> 广告推广渠道 </router-link>
                    </li>
                    <li class="active">
                        <strong>广告版式</strong>
                    </li>
	            </ol>
	        </div>
	    </div>
        <div class="wrapper wrapper-content animated fadeInRight min-height-800px">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>广告版式</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-8 m-b-xs">
                                    <div class="form-group" id="data_5">
                                        <div class="input-daterange input-group" id="datepicker">
                                            <span> FROM </span>
                                            <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
                                            <span> TO </span>
                                            <date-picker :date="endtime" :option="option" :limit="limit"></date-picker>
                                        </div>
                                    </div>
                                </div>
                                <div class="float-right">
                                    <button class="btn btn-w-m btn-primary" v-on:click="refresh" >
                                        <i class="fa fa-refresh"></i> 刷新
                                    </button>
                                    <router-link to="./Post">
                                        <button type="button" class="btn btn-w-m btn-primary"><i class="fa fa-plus"></i> 新广告 </button>  
                                    </router-link>
                                </div>
                                <!-- 搜索框 -->
                                <!-- <div class="col-sm-3">
                                    <div class="input-group"><input type="text" placeholder="Search" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> Go!</button> </span></div>
                                </div> -->
                            </div>
                            <div class="table-responsive">
                                <!-- <table class="table table-striped"> -->
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>广告名称 </th>
                                            <th>创建日期 </th>
                                            <th>展示(Impressions)</th>
                                            <th>点击(Clicks)</th>
                                            <th>CPM($)</th>
                                            <th>CPI($)</th>
                                            <th>安装(Installs)</th>
                                            <th>消费($)</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="item in items">
                                            <td>{{ item.adname }}</td>
                                            <td>{{ item.createtime }}</td>
                                            <td>{{ item.impl }}</td>
                                            <td>{{ item.click }}</td>
                                            <td>{{ item.ecpm }}</td>
                                            <td>{{ item.cpi }}</td>
                                            <td>{{ item.installs }}</td>
                                            <td>{{ item.consume }}</td>
                                            <td>{{ item.isdisplay }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>


// 配置参数
import config from '../../../../config/config.js'
import dateFormat from '../../server/dateFormat.js'
import myDatepicker from '../../../../static/js/plugins/vue-datepicker/vue-datepicker-es6.vue'
import toastr from '../../../../static/js/toastr.min'

export default {
  name: 'test',
  data () {
    return {
        startTime: {
          time: ''
        },
        endtime: {
          time: ''
        },
        items: [],
        // 配置日期选择框
        option: config.datePicker.option,
        timeoption: config.datePicker.timeoption,
        multiOption: config.datePicker.multiOption,
        limit: config.datePicker.limit
    }
  },
  components: {
    "date-picker": myDatepicker
  },
  // 组建创建完成之后执行
  created () {

    //今天&昨天的时间 
    let yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    this.endtime.time = dateFormat.format(new Date(), "yyyy-MM-dd");
    this.startTime.time = dateFormat.format(yesterday, "yyyy-MM-dd");

    //  获取列表数据
    this.GetTableData()
  },
  methods: {
    refresh () {
        if (this.endtime.time < this.startTime.time) {
            // 刷新时候日期的判断
            toastr.info("截至日期不能小于开始日期");
            return false;
        } else if (dateFormat.format(new Date(), "yyyy-MM-dd") < this.endtime.time) {
            // 当前日期不能小于截止日期check 
            toastr.info("截至日期不能大于当前日期");
            return false;
        }
        this.GetTableData(true);
    },
    GetTableData (refresh) {
        let vue = this;
                    
        $.ajax({
                url:'http://' + config.URL + '/ad/showAd',
                dataType:"jsonp",
                async: false, 
                processData:true,
                type:'get',
                data: {
                    // 渠道ID
                    "cid": vue.$route.params.channelid,
                    "pageNum": 1,
                    "pageSize": 100,
                    "begain": vue.startTime.time,
                    "end": vue.endtime.time
                },  
                jsonp:"callback",
                timeout: 5000,
                success:function(data, status){
                    // console.log(data.data.result);
                    vue.items = data.data.result;
                    if (refresh) {
                        toastr.success("刷新成功");
                    }
                },
                error:function(XHR, textStatus, errorThrown){
                    toastr.success("请求出错，请稍后再试");
                    console.log('err');
                }
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .cov-date-body[data-v-84af6e3a] {
        top: 320px;        
    }
</style>
